<template>
    <div class="page-banner-list">
        <div class="page-banner-list-header">
            <el-button type="danger" @click="handleDeletes">删除所有数据
            </el-button>
            <el-button type="danger" :disabled="selectadBannerIds.length === 0" @click="handleDeleteSected">删除选中
            </el-button>



            <el-button type="primary" @click="$router.push('/banner/add')">新增轮播图</el-button>
            <el-button @click="fetchdData">
                <el-icon>
                    <Refresh />
                </el-icon>
            </el-button>
        </div>

        <el-table :data="displayTableData" @selection-change="onSelectionChange">
            <el-table-column type="selection" label="序号" width="80" />
            <el-table-column prop="link" label="简介" width="180" />
            <el-table-column prop="alt" label="姓名" width="180" />
            <el-table-column prop="img" label="图片" width="180">
                <template #default="scope">
                    <img :src="scope.row.img" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(scope.row.bannerid)">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没数据" />
            </template>


        </el-table>

        <div class="page-banner-list-footer">
            <el-pagination v-show="tableData.length>0" background layout="total, prev,pager,next"
                v-model:current-page="page" :page-size="pageSize" :total="tableData.length" />
        </div>

    </div>
</template>



<script>
import { getBannerData, delBanner, delBanner2 } from "../../api/banner.js";
export default {

    name: "banner-list",
    data() {
        return {
            //轮播图数据
            tableData: [],
            //当前页
            page: 1,
            //每页条数
            pageSize: 10,
            //勾选的数据id集合
            selectadBannerIds: [],

        }
    },
    computed: {
        //根据page将tableDate裁切后展示
        displayTableData() {
            return this.tableData.slice((this.page - 1) * 10, this.page * 10)
        },
    },
    methods: {
        fetchdData() {
            getBannerData().then((data) => {
                console.log("===", data)
                this.tableData = data.data;
            });
        },

        handleDelete(id) {
            console.log(id);
            delBanner(id).then((data) => {
                this.fetchdData();
            });
        },
        handleDeleteSected() {
            //获取选中数据
            for (let item in this.selectadBannerIds) {
                delBanner(this.selectadBannerIds[item]).then((data) => {
                    this.fetchdData();
                });
            }
        },
        //删除全部数据
        handleDeletes() {
            delBanner2().then((data) => {
                this.fetchdData();
            });
        },

        //勾选回调
        onSelectionChange(abc) {

            this.selectadBannerIds = abc.map((item) => item.bannerid);
            console.log(this.selectadBannerIds)
        },
    },

    mounted() {
        this.fetchdData();
    },
}
</script>



<style lang ="scss" scoped>
.page-banner-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    img {
        display: block;
        height: 80px;
    }

    &-header,
    &-footer {
        padding: 10px 0;
        display: flex;
        justify-content: flex-end;
    }

    .el-table {
        flex: 1;
    }
}
</style>